<template>
  <div class="tableList">
    <vxe-grid
      class="table-normal"
      ref="table"
      resizable
      show-overflow
      row-key
      keep-source
      border="inner"
      :data="tableList"
      :columns="columns"
      v-bind="isEdit ? vxeOptions : null"
      @edit-actived="editActivedEvent"
    >
      <template #employeeName="{ row }">
        <!-- <vxe-input v-model="row.employeeName" type="text"></vxe-input> -->
        <span>{{ row.employeeName }}</span>
      </template>
      <template #category="{ row }">
        <!-- <vxe-input v-model="row.category" type="text"></vxe-input> -->
        <span>{{ row.category }}</span>
      </template>

      <template #employeeCode="{ row }">
        <!-- <vxe-input v-model="row.employeeCode" type="text"></vxe-input> -->
        <span>{{ row.employeeCode }}</span>
      </template>
      <template #idCard="{ row }">
        <!-- <vxe-input v-model="row.idCard" type="text"></vxe-input> -->
        <span>{{ row.idCard }}</span>
      </template>
      <template #projectPost="{ row }">
        <vxe-select v-model="row.projectPost" placeholder="项目岗位" clearable>
          <vxe-option
            v-for="item in postList"
            :key="item.id"
            :value="item.projectPost"
            :label="item.projectPost"
          ></vxe-option>
        </vxe-select>
      </template>
      <template #e_arrivalTime="{ row }">
        <vxe-input
          v-model="row.arrivalTime"
          placeholder="日期"
          class="date"
          type="date"
          valueFormat="yyyy-MM-dd"
        ></vxe-input>
      </template>
      <template #d_arrivalTime="{ row }">
        <span>{{ row.arrivalTime | parseTime('{y}-{m}-{d}') }}</span>
      </template>
      <template #leaveTime="{ row }">
        <span>{{ row.leaveTime | parseTime('{y}-{m}-{d}') }}</span>
      </template>
      <template #e_isPartTime="{ row }">
        <vxe-select v-model="row.isPartTime" placeholder="是否兼职" clearable>
          <vxe-option :value="true" label="是"></vxe-option>
          <vxe-option :value="false" label="否"></vxe-option>
        </vxe-select>
      </template>
      <template #d_isPartTime="{ row }">
        <span>{{ row.isPartTime | formatBoolean }}</span>
      </template>

      <template #e_isPractice="{ row }">
        <vxe-select v-model="row.isPractice" placeholder="是否实习" clearable>
          <vxe-option :value="true" label="是"></vxe-option>
          <vxe-option :value="false" label="否"></vxe-option>
        </vxe-select>
      </template>
      <template #d_isPractice="{ row }">
        <span>{{ row.isPractice | formatBoolean }}</span>
      </template>
      <template #operation="{ row }">
        <vxe-button type="text" status="primary" @click="confirmEvent(row)">调出</vxe-button>
      </template>
    </vxe-grid>
    <vxe-pager
      background
      :current-page.sync="form.page"
      :page-size.sync="form.size"
      :total="total"
      :layouts="['Total', 'Sizes', 'PrevPage', 'JumpNumber', 'NextPage']"
      @page-change="change"
    >
    </vxe-pager>
  </div>
</template>
<script>
import util from '@/util/util';
import VXETable from 'vxe-table';
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Object,
      default: () => {},
    },
    postList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const validRules = {
      dept: [{ message: '多个部门用英文逗号隔开' }],
    };
    return {
      showEdit: false,
      isEnabledFlag: false,
      isAssessmentInstructions: false,
      isUnit: false,
      isLineNumber: false,
      isOperationField: false,
      isDept: false,
      types: [
        {
          name: '项目商务状态档案',
        },
      ],
      vxeOptions: {
        'row-config': { isHover: true, isCurrent: true },
        'radio-config': { labelField: 'groupName' },
        'scroll-y': { enabled: false },
        'edit-rules': validRules,
        'edit-config': { trigger: 'click', mode: 'row', showStatus: true, showIcon: false },
      },
      selectRow: null,
      form: {
        projectCode: '',
        page: 1,
        size: 10,
      },
    };
  },
  computed: {
    tableList() {
      return this.tableData?.list;
    },
    total() {
      return this.tableData?.total;
    },
  },
  filters: {
    formatBoolean(val) {
      if (val === null || val === undefined || val === '') {
        return val;
      }
      return val ? '是' : '否';
    },
  },
  created() {
    //     this.treeDrop()
  },
  methods: {
    editActivedEvent({ row, rowIndex }) {
      this.isEnabledFlag = !row.parentTag;
      this.isAssessmentInstructions = !row.parentTag;
      this.isUnit = !row.parentTag;
      this.isLineNumber = !row.parentTag;
      this.isOperationField = !row.parentTag;
      this.isDept = row.parentTag && true;
    },
    change({ type, currentPage, pageSize }) {
      this.$emit('pager', { currentPage, pageSize });
      console.log(type, currentPage, pageSize);
    },
    confirmEvent(row) {
      this.$emit('outerStaff', { ...row });
    },
    out(row) {
      const result = { ...row };
      result.leaveTime = util.parseTime(new Date(), '{y}-{m}-{d}');

      this.$api.addExternalEmployee([result]).then((res) => {
        if (res.code === 0) {
          VXETable.modal.message({
            content: '保存成功',
            status: 'success',
          });
          this.$emit('reload');
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.table-normal {
}
</style>
